<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="class-example">
			<!-- 动态切换 class样式 -->
			<div v-bind:class="{active:isActive}">xxx</div>
			<!--指令也可以与普通的 class attribute 共存。 -->
			<div class="static" v-bind:class="{active:isActive,'text-danger':hasError}">
				gggg
			</div>
			<!-- class 绑定对象之间是个对象 -->
			<div v-bind:class="classObject">classObject</div>
			<!-- 数组语法 -->
			<div v-bind:class="[activeClass,errorClass]">array</div>
			
			<!-- 用在组件上 -->
			<my-component class="baz boo"></my-component>
		</div>	
		<script type="text/javascript">
			
			Vue.component('my-component',{
				template:'<p class="foo bar">Hi</p>'
			})
			
			let app=new Vue({
				el:'#class-example',
				data:{
					activeClass:'activeClass',
					errorClass:'errorClass',
					isActive:true,
					hasError:false,
					// classObject:{
					// 	'active':true,
					// 	'text-danger':true
					// }
				},
				//计算属性，这样更好一些
				computed:{
					classObject:function(){
						return {
							'active':this.isActive && !this.hasError,
							'text-danger':this.hasError
						}
					}
				}
			});
			
			
		</script>	
		<style type="text/css">
			.red{color: red;}
			.blue{color: blue;font-size: 100px;}
			.active{color: #FF0000;}
			.activeClass{color: #0000FF;}
		</style>
	</body>
</html>
